<!-- 部门管理 -->
<template>
  <div class="department-man">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="20">
        <el-form :model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="部门名称" label-width="70px">
            <el-input v-model="formData.jobName" @keyup.enter.native="getDepartmentList(1, 10)"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div style="display: flex; justify-content: flex-end; height: 29px;">
          <el-button type="success" size="mini" @click="open()">添加</el-button>
          <el-button type="primary" size="mini" @click="getDepartmentList(1, 10)">查询</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      border
      :data="tableData"
      style="width: 100%;overflow-x: auto;">
      <el-table-column
        align="center"
        label="序号">
        <template slot-scope="scope">
          {{scope.row.Row}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="用户名">
        <template slot-scope="scope">
          {{scope.row.UserName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="部门名称">
        <template slot-scope="scope">
          {{scope.row.jobName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="描述">
        <template slot-scope="scope">
          {{scope.row.describe}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="150"
        label="创建时间">
        <template slot-scope="scope">
          {{scope.row.createTime}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleModify(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="department-man-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 15, 20]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <new-department-dialog></new-department-dialog>
    <modify-department-dialog :modifydate="modifydate" :myFeerole="myFeerole" :jobinfo="jobinfo" :editChosen="editChosen"></modify-department-dialog>
  </div>
</template>

<script>
import NewDepartmentDialog from './dialog/NewDepartmentDialog.vue'
import ModifyDepartmentDialog from './dialog/ModifyDepartmentDialog.vue'
import {
  getJob,
  delJob,
  getJobInfo
} from './api/userman'
import { mapState } from 'vuex'
export default {
  components: {
    NewDepartmentDialog,
    ModifyDepartmentDialog
  },
  data () {
    return {
      formData: {
        jobName: ''
      },
      loading: true,
      total: 0,
      pageNo: 1,
      myFeerole: 0,
      number: 10,
      tableData: [],
      jobinfo: [],
      editChosen: [],
      modifydate: ''
    }
  },
  mounted () {
    this.getDepartmentList(1, 10)
  },
  computed: {
    ...mapState({
      qjrole: state => state.user.qjrole
    })
  },
  methods: {
    // 获取部门列表
    async getDepartmentList (pg, nb) {
      this.loading = true
      const res = await getJob({
        jobName: this.formData.jobName,
        page: pg,
        num: nb
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.dataCount
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 部门信息列表
    async getJobInfos (bp) {
      this.editChosen = []
      const res = await getJobInfo({
        jobId: bp
      })
      if (res.status === 200) {
        this.jobinfo = res.menuList
        this.myFeerole = res.feeRole
        this.jobinfo.map(item => {
          if (item.checkFlag) {
            this.editChosen.push(item.id)
          }
          if (item.children.length !== 0) {
            item.children.map(data => {
              if (data.checkFlag) {
                this.editChosen.push(data.id)
              }
            })
          }
        })
        console.log(this.jobinfo, this.editChosen, 'oooooooooooooo')
        this.$store.commit('show_modify_department_dialog')
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 删除
    async delDepartmentList (bp, index) {
      const res = await delJob({
        jobId: bp
      })
      if (res.status === 200) {
        this.$notify({
          title: '删除成功',
          message: res.msg,
          type: 'success'
        })
        this.tableData.splice(index, 1)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 修改
    handleModify (index, row) {
      if (this.qjrole === '2') {
        this.$notify({
          title: '提示',
          message: '您的权限不足！',
          type: 'warning'
        })
        return false
      }
      this.getJobInfos(row.jobId)
      this.modifydate = JSON.stringify(row)
    },
    // 删除
    handleDelete (index, row) {
      if (this.qjrole === '2') {
        this.$notify({
          title: '提示',
          message: '您的权限不足！',
          type: 'warning'
        })
        return false
      }
      this.$confirm('是否删除此信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delDepartmentList(row.jobId, index)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange (val) {
      this.getDepartmentList(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getDepartmentList(this.pageNo, val)
      this.number = val
    },
    // 打开弹窗
    open () {
      if (this.qjrole === '2') {
        this.$notify({
          title: '提示',
          message: '您的权限不足！',
          type: 'warning'
        })
        return false
      }
      this.$store.commit('show_new_department_dialog')
    }
  }
}
</script>

<style lang="less">
.department-man {
  .department-man-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
}
</style>
